<template>
  <div>
    <my-form-drawer :title="action == 1 ? '编辑组织' : '新增组织'" :width="500" :visible="visible" :layout="layout" @ok="save" @cancel="show(false)">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="上级组织" prop="pid" v-show="!(action === 1 && (form.id === orgTree[0].id || form.id == undefined))">
          <!-- <a-input v-model="form.pName" /> -->
          <my-tree-select ref="myTree" :disabled="action === 0" :tree-data="orgTree" :value="treeValue" :replaceFields="replaceFields" @selectChange="selectChange" />
        </a-form-model-item>
        <a-form-model-item label="组织名称" prop="name">
          <a-input v-model="form.name" />
        </a-form-model-item>
<!--        <a-form-model-item label="组织机构编码" prop="code">-->
<!--          <a-input v-model="form.code" />-->
<!--        </a-form-model-item>-->
        <a-form-model-item label="地址" prop="address">
          <a-textarea v-model="form.address" allow-clear />
        </a-form-model-item>
      </a-form-model>
    </my-form-drawer>
  </div>
</template>

<script>
import MyFormDrawer from '@/components/drawer/MyFormDrawer';
import myTreeSelect from '../components/myTreeSelect';
import { getOrgByUser, add, update } from '@/services/org';
import { list2Tree } from '../../utils/common';
export default {
  name: 'orgStrutureEdit',
  components: { MyFormDrawer, myTreeSelect },
  data() {
    return {
      visible: false,
      action: 0, //0:行新增。1：修改，2:按钮新增
      layout: 'vertical',
      orgTree: [],
      treeValue: undefined,
      replaceFields: {
        children: 'children',
        title: 'name',
        key: 'id',
        value: 'id',
      },
      form: {
        name: '',
        pid: '',
        id: '',
        pName: '',
        code: '',
        sortNo: '1',
        address: '',
      },
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        pid: [{ required: true, message: '上级不能为空', trigger: 'blur' }],
        // code: [{ required: true, message: '组织机构编码不能为空', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.getOrgAll();
  },
  methods: {
    show(state, action, data) {
      this.visible = state;
      if (state) {
        this.getOrgAll();
        this.action = action;
        if (action === 2){
          this.treeValue = undefined;
          this.form = {
            id: '',
            name: '',
            pid: '',
            pName: '',
            code: '',
            sortNo: '1',
            address: '',
          };
        }
        else if (action === 1) {
          this.treeValue = data.pid;
          Object.keys(this.form).forEach((item) => (this.form[item] = data[item]));
          if(this.form.id == this.orgTree[0].id){
            delete this.form.id
          }
        } else if (action === 0) {
          console.log(data);
          this.form.pid = data.id;
          this.treeValue = data.id;
          this.form.name = '';
          this.form.code = '';
          this.form.address = '';
        }
      }
    },
    getOrgAll() {
      getOrgByUser().then((res) => {
        if (res.data.code === 0) {
          this.orgTree = list2Tree(res.data.data);
          console.log(this.orgTree);
          if(this.action == 1){
            this.checkChildren(this.orgTree, this.form.id);
          }
        }
      });
    },
    checkChildren(arr, id){
      for(let i = 0;i < arr.length;i++){
        if(arr[i].children.length > 0){
          this.checkChildren(arr[i].children,id);
        }
        if(arr[i].id == id){
          arr.splice(i, 1);
        }

      }
    },
    selectChange(value) {
      console.log('selectchange',value);
      this.form.pid = value;
      this.treeValue = value;
    },
    save() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (this.action == 1) {
          if(!this.form.id){
            this.form.id = 1;
          }
          update(this.form).then((res) => {
            if (res.data.code === 0) {
              this.$message.success('修改成功');
              this.show(false);
              this.$emit("getList", { data: this.form, isEdit:true });
            }
          });
        } else {
          add(this.form).then((res) => {
            if (res.data.code === 0) {
              this.$message.success('添加成功');
              this.show(false);
              this.$emit("getList", { data: this.form, isEdit:false });
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped></style>
